<template>
    <div>
        <FruitItem
            v-for="(item,index) in list"
            :item="item" :index="index"
            :key="index"
            @add="addHandler"
            @sub="subHandler"
        >
        <div class='aaa' v-show= "item.discount">
             <!-- eslint-disable-next-line vuejs-accessibility/alt-text -->
            <img class='image' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F28dc92f6936412dc83c416fac06abf62e95921a92920-yySbVZ_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659197516&t=d3d1236435e9adb0879649ee8c78060d'/>
        </div>
        </FruitItem>
        <div class='total'>
            总价:{{ total | currencyRMB }}
        </div>
    </div>
</template>

<script>

import FruitItem from './FruitItem.vue';

export default {
  components: {
    FruitItem,
  },
  data() {
    return {
      list: [
        {
          name: '香蕉', price: 10, count: 1, discount: true,
        },
        {
          name: '苹果', price: 20, count: 1, discount: false,
        },
        {
          name: '榴莲', price: 30, count: 1, discount: true,
        },
        {
          name: '葡萄', price: 50, count: 1, discount: false,
        },
      ],
    };
  },
  computed: {
    total() {
      let sum = 0;
      this.list.forEach((item) => {
        sum += item.count * item.price;
      });
      return sum;
    },
  },
  methods: {
    addHandler(index) {
      if (this.list[index].count < 4) {
        this.list[index].count += 1;
      } else {
        alert('数量不能大于4');
      }
    },
    subHandler(item) {
      if (item.count > 1) {
        item.count -= 1;
      } else {
        alert('数量不能小于1');
      }
    },
  },
};
</script>

<style lang="scss" >
    .image{
        width: 30px;
        height: 30px;
        animation: 0ms;
        -webkit-animation: rotateImg 3s linear infinite;
    }
    @keyframes rotateImg {
      0% {transform : rotate(0deg);}
    100% {transform : rotate(360deg);}
    }
    .total{
        margin-left:870px;
        width: 300px;
        height: 80px;
        font-size: 25px;
    }
</style>
